<template>
	<view class="key_box">
		<view class="key_methods">
			<key-methods ref="keyMethodsRef1" />
		</view>
		<view class="key_methods">
			<key-methods ref="keyMethodsRef2" />
		</view>
		<view class="footer_box">
			<view class="footer_button" @tap="confirm">确认</view>
		</view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import keyMethods from './components/keyMethods.vue';
import { useOrderStoreToRefs } from '@/store/useOrderStore';

const { getKeyInfo, returnKeyInfo } = useOrderStoreToRefs();
const keyMethodsRef1 = ref();
const keyMethodsRef2 = ref();

onMounted(() => {
	init();
});

const init = () => {
	// 添加空值检查
	if (!keyMethodsRef1.value || !keyMethodsRef2.value) {
		// 如果组件还没准备好，可以使用 nextTick 或者延时重试
		setTimeout(init, 100);
		return;
	}
	keyMethodsRef1.value.init({
		title: '钥匙给予方式',
		keyMethodsId: getKeyInfo.value.keyMethodsId || 0,
		content: getKeyInfo.value.content || ''
	});
	keyMethodsRef2.value.init({
		title: '钥匙归还方式',
		keyMethodsId: returnKeyInfo.value.keyMethodsId || 0,
		content: returnKeyInfo.value.content || ''
	});
};
const confirm = () => {
	const data1 = keyMethodsRef1.value.confirm();
	const data2 = keyMethodsRef2.value.confirm();
	if (data1 == null || data2 == null) {
		// const empty = {
		// 	keyMethodsId: null,
		// 	content: ''
		// };
		// getKeyInfo.value = empty;
		// returnKeyInfo.value = empty;
		return
	}
	getKeyInfo.value.keyMethodsId = data1.id;
	getKeyInfo.value.content = data1.content;
	returnKeyInfo.value.keyMethodsId = data2.id;
	returnKeyInfo.value.content = data2.content;
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.key_box {
	padding: 32rpx;
	background: #f9f6f6;
	min-height: 100vh;
	box-sizing: border-box;
	padding-bottom: calc(134rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(134rpx + env(safe-area-inset-bottom));
}

.key_methods {
	margin-top: 24rpx;
	&:first-child {
		margin-top: 0;
	}
}

.footer_box {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	padding: 6rpx 32rpx;
	padding-bottom: calc(6rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(6rpx + env(safe-area-inset-bottom));
	box-sizing: border-box;
	border-top: 1rpx solid #e4e6e6;
	background-color: #ffffff;
	z-index: 1;

	.footer_button {
		height: 88rpx;
		background: linear-gradient(90deg, #ff6188 0%, #ff5252 100%);
		border-radius: 62rpx;
		font-size: 28rpx;
		color: #ffffff;
		text-align: center;
		line-height: 88rpx;
	}
}
</style>
